<template>
  <div class="synergy-talent">
    <ul v-if="listData.length > 0" class="list-box">
      <li v-for="(item, index) in listData" :key="index">
        <div class="logo-box" @click="toDetail(item)">
          <img
            width="100%"
            height="100%"
            src="../../../../../assets/img/default-user.png"
            alt=""
          />
        </div>
        <div class="info-box">
          <h2 class="name" @click="toDetail(item)">{{ item.name }}</h2>
          <p class="info">
            <span
              >任职机构：<i>{{ item.org }}</i></span
            >
            <span
              >专利数量：<i
                class="patent-count"
                @click="handleShowPatentList(item)"
                >{{ item.count || 0 }}</i
              ></span
            >
            <span
              >优势领域：<i>{{ item.ipcs && item.ipcs.join("；") }}</i></span
            >
          </p>
        </div>
        <div class="tools-box">
          <el-tooltip
            class="item"
            effect="dark"
            :content="!item.isCollect ? '收藏' : '取消收藏'"
            placement="top"
          >
            <a
              :class="{
                active: item.isCollect,
                'el-icon-star-on': item.isCollect,
                'el-icon-star-off': !item.isCollect,
              }"
              @click="collet(item, index)"
            ></a
            >{{ item }}
          </el-tooltip>
        </div>
      </li>

      <el-col
        :span="24"
        style="background: #fff; text-align:center;padding:10px; 0"
      >
        <el-pagination
          background
          @current-change="getOneCurrentPage"
          layout="prev, pager, next"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </ul>
    <ul v-else class="no-data">
      <li>{{ noData }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    keyword: {
      type: String,
    },
  },
  data() {
    return {
      listAllData: [],
      listData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      noData: "数据加载中...",
    };
  },
  mounted() {
    this.getPersonnelList(this.keyword);
  },
  methods: {
    getPersonnelList(keyword) {
      const params = {
        ipi: 1,
        ips: 10,
        scope: keyword,
      };
      this.listData = [];
      this.total = 0;
      this.noData = "数据加载中...";
      this.$get(this.$Url.technology.personnelList, params)
        .then((res) => {
          let result = res.data && res.data.result;
          if (result.length <= 0) {
            this.noData = "暂无数据";
          }
          this.listAllData = JSON.parse(JSON.stringify(result));

          this.listAllData.forEach((v, index) => {
            let valIndex = (this.pageNum - 1) * this.pageSize;
            if (index >= valIndex && index < valIndex + this.pageSize) {
              if (v.isCollect === undefined) {
                this.isCollect(v.pid, this.listAllData[index]);
              }
            }
          });
          this.listData = this.listAllData.filter((v, index) => {
            let valIndex = (this.pageNum - 1) * this.pageSize;
            return index >= valIndex && index < valIndex + this.pageSize;
          });
          this.total = (res.data && res.data.total) || 0;
        })
        .catch((err) => {
          this.noData = "暂无数据";
        });
    },
    getOneCurrentPage(val) {
      this.pageNum = val;
      this.listAllData.forEach((v, index) => {
        let valIndex = (this.pageNum - 1) * this.pageSize;
        if (index >= valIndex && index < valIndex + this.pageSize) {
          if (v.isCollect === undefined) {
            this.isCollect(v.pid, this.listAllData[index]);
          }
        }
      });
      this.listData = this.listAllData.filter((v, index) => {
        let valIndex = (this.pageNum - 1) * this.pageSize;
        return index >= valIndex && index < valIndex + this.pageSize;
      });
    },
    // 是否收藏
    isCollect(pid, sth) {
      this.$get(this.$Url.EnergyTalent.isCollect, {
        pid,
      })
        .then((res) => {
          let data = res.data;
          this.$set(sth, "isCollect", data);
        })
        .catch((err) => {});
    },
    // 进入详情页
    toDetail(item) {
      this.$router.push({
        name: "EnergyTalentDetailIntroduction",
        query: {
          key: item.pid || "",
          companyName: item.org || "",
        },
      });
    },
    collet(item, index) {
      if (item.isCollect) {
        // 取消收藏
        this.$get(this.$Url.EnergyTalent.cancelCollectExpert, {
          pid: item.pid,
        })
          .then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "取消收藏成功",
              });
              this.$set(this.listData[index], "isCollect", !item.isCollect);
            } else {
              this.$message({
                type: "error",
                message: "取消收藏失败",
                duration: 1000,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      } else {
        this.$get(this.$Url.EnergyTalent.collectExpert, {
          pid: item.pid,
        })
          .then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "收藏成功",
                duration: 1000,
              });
              this.$set(this.listData[index], "isCollect", !item.isCollect);
            } else {
              this.$message({
                type: "error",
                message: "收藏失败",
                duration: 1000,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list-box {
  position: relative;
  list-style: none;
  li {
    position: relative;
    display: block;
    min-height: 140px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 140px;
    border-bottom: 1px solid #e5e7f0;
    .logo-box {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d9e0ee;
      box-sizing: border-box;
    }
    .info-box {
      position: relative;
      padding-right: 100px;
      h2 {
        width: 100%;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        color: #4f515b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .info {
        display: flex;
        align-items: center;
        width: 80%;
        margin-top: 10px;
        span {
          flex: 1;
          font-size: 12px;
          color: #86899e;
          i {
            font-style: normal;
            color: #4f515b;
          }
          em {
            vertical-align: middle;
          }
        }
        .patent-count {
          cursor: pointer;
          &:hover {
            color: $mainColor;
          }
        }
        .elrate {
          display: inline-block;
        }
      }
    }
    .tools-box {
      position: absolute;
      top: 10px;
      right: 0;
      display: flex;
      width: 165px;
      padding-top: 40px;
      padding-left: 20px;
      box-sizing: border-box;
      a {
        display: block;
        font-size: 16px;
        line-height: 36px;
        margin-left: 20px;
        color: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        &.score {
          background-color: #8696e8;
        }
        &.el-icon-star-off {
          background: #909399;
        }
      }
      .active {
        font-size: 21px;
        background-color: #8696e8;
      }
    }
  }
}
.no-data {
  list-style: none;
  li {
    padding: 20px;
  }
}
</style>